import React, { useState, useEffect } from "react";

function Son() {
  const [text, setText] = useState("a");

  useEffect(() => {
    function onTimeout() {
      console.log("⏰ " + text);
    }

    console.log('🔵 安排 "' + text + '" 日志');
    const timeoutId = setTimeout(onTimeout, 3000);

    return () => {
      console.log('🟡 取消 "' + text + '" 日志');
      clearTimeout(timeoutId);
    };
  }, [text]);

  return (
    <>
      <label>
        日志内容：
        <input value={text} onChange={e => setText(e.target.value)} />
      </label>
      <h1>{text}</h1>
    </>
  );
}

const Playground: React.FC = () => {
  const [show, setShow] = useState(false);

  return (
    <>
      <button onClick={() => setShow(!show)}>{show ? "卸载" : "挂载"}组件</button>
      {show && <hr />}
      {show && <Son />}
    </>
  );
};
export default Playground;
